<!DOCTYPE html>
<html lang="zh">

<head>
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="keywords" />
    <meta name="description" />
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="./css/animate.min.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/swiper.css">
    <link rel="stylesheet" href="./css/plane.css">
    <link rel="stylesheet" href="./css/index.css">
    <style>
        .fixed_box .content_box:first-child .text{
            transform: translate(20px,20px);
            opacity: 0;
            transition: 1s;
        }
        .fixed_box .content_box:first-child .btn a{
            transform: translate(20px, 20px);
            opacity: 0;
            transition: 1s;
        }

        .fixed_box .content_box.fist .text{
            transform: translate(0px,0px);
            opacity: 1;
        }
        .fixed_box .content_box.fist .btn a{
            transform: translate(0px,0px);
            opacity: 1;
            transition-delay: 0.2s;
        }
    </style>
</head>

<body>
    <div class="home">

        <div class="header">
            <div class="l">
                <a href="./index.html" class="logo">
                    <img src="./images/logo.png" alt="">
                </a>
                <div class="t">
                    澳洲官方认证授权<br>
                    教育及签证服务机构
                </div>
            </div>
            <div class="r">
                <div class="icons">
                    <a href="">
                        <img src="./images/icon1.png" alt="">
                    </a>
                    <a href="">
                        <img src="./images/icon2.png" alt="">
                    </a>
                    <a href="">
                        <img src="./images/icon3.png" alt="">
                    </a>
                </div>
                <div class="btns">
                    <a href="">注册</a>
                    <a href="">登录</a>
                </div>
                <div class="lan">
                    <a href="">EN </a>
                </div>
                <div class="pc_menu">
                    <span></span><span></span>
                </div>
            </div>
        </div>

        <!-- <div class="pheader">
            <div class="menu">
                <a href="./index.html" target="_self" class="animated fadeInUpLeft">
                    <svg xmlns="http://www.w3.org/2000/svg" width="250" height="37" viewBox="0 0 250 37" fill="none">
                        <path d="M0 0.278809H38.7303V6.96607H0V0.278809Z" fill="#333333" />
                        <path d="M0 14.4892H26.749V20.8979H0V14.4892Z" fill="#333333" />
                        <path d="M0 30.0928H39.009V36.7801H0V30.0928Z" fill="#333333" />
                        <path d="M0 0.278809H8.6377V36.7801H0V0.278809Z" fill="#333333" />
                        <path
                            d="M66.873 0.278809H75.2321V36.5015H73.003C69.6175 36.5015 66.873 33.757 66.873 30.3715V0.278809Z"
                            fill="#333333" />
                        <path
                            d="M101.145 0.278809H109.504V30.3715C109.504 33.757 106.76 36.5015 103.374 36.5015H101.145V0.278809Z"
                            fill="#333333" />
                        <path d="M73.003 30.0928H101.703V36.5015H73.003V30.0928Z" fill="#333333" />
                        <path
                            d="M200.617 0.278809H211.205L228.726 18.5401C229.576 19.4258 228.948 20.8979 227.721 20.8979H221.236L200.617 0.278809Z"
                            fill="#333333" />
                        <path
                            d="M249.936 0.278809H239.348L222.731 17.5971C221.542 18.8369 222.421 20.8979 224.139 20.8979H229.317L249.936 0.278809Z"
                            fill="#333333" />
                        <path d="M221.236 20.8979H229.317V36.7801H221.236V20.8979Z" fill="#333333" />
                        <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M167.459 0H133.744V23.4054H167.459C171.152 23.4054 174.146 20.4114 174.146 16.7182V6.68726C174.146 2.99398 171.152 0 167.459 0ZM164.673 6.68726H141.825V16.9968H164.673C165.288 16.9968 165.787 16.4977 165.787 15.8822V7.80181C165.787 7.4146 165.59 7.07338 165.29 6.87365C165.113 6.75583 164.901 6.68726 164.673 6.68726Z"
                            fill="#333333" />
                        <path d="M133.744 17.2754H142.103V36.7799H133.744V17.2754Z" fill="#333333" />
                        <path d="M151.855 23.1268H162.444L179.998 36.7799H166.902L151.855 23.1268Z" fill="#333333" />
                    </svg>
                </a>
                <div class="navbox">
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                </div>
            </div>
        </div>
        <div class="menuList">
            <div class="lan">
                <a href="">CN</a>
                <a href="">EN</a>
            </div>
            <div class="item animated fadeInUp">
                <div class="tb">
                    <a href="./index.html">Home</a>
                </div>
            </div>
            <div class="item animated fadeInUp">
                <div class="tb">
                    <a href="./about.html">About Us</a>
                    <img src="./images/arrow.svg" alt="">
                </div>
                <div class="types_top">
                    <a class="animated fadeIn" href="./values.html">Vision & Values</a>
                    <a class="animated fadeIn" href="./quality.html" style="animation-delay: 100ms;">Quality &
                        Competence</a>
                    <a class="animated fadeIn" href="./research.html" style="animation-delay: 200ms;">Research &
                        Development</a>
                    <a class="animated fadeIn" href="./about_team.html" style="animation-delay: 300ms;">Our Team</a>
                </div>
            </div>
            <div class="item animated fadeInUp">
                <div class="tb">
                    <a href="./products.html">Products</a>
                </div>
            </div>
            <div class="item animated fadeInUp">
                <div class="tb">
                    <a href="./values.html">Sustainable development</a>
                </div>
            </div>
            <div class="item animated fadeInUp">
                <div class="tb">
                    <a href="./product_line.html">Facilities</a>
                </div>
            </div>
            <div class="item animated fadeInUp">
                <div class="tb">
                    <a href="./news.html">News</a>
                </div>
            </div>
            <div class="item animated fadeInUp">
                <div class="tb">
                    <a href="./contact.html">Contact us</a>
                </div>
            </div>
        </div> -->

        <div class="fixed_box">
            <div class="content_box content_box1">
                <div class="text">
                    <p> “留学只是一个开始</p>
                    <p>定制化服务</p>
                    <p>做好整体规划才是关键”</p>
                </div>
                <div class="btn">
                    <a href="">了解更多</a>
                </div>
            </div>
            <div class="content_box content_box2">
                <div class="text en">
                    <p>“New Fountains（新源）</p>
                    <p>是海外本土留学机构免费留学申请平台</p>
                    <p>是澳洲官方认证和授权的</p>
                    <p>教育和签证服务机构”</p>
                </div>
                <div class="btn">
                    <a href="">了解更多</a>
                </div>
            </div>
            <div class="content_box content_box3">
                <div class="text">
                    <p>“想申请留学？</p>
                    <p>DIY留学遇到困难?</p>
                    <p>关于签证问题？</p>
                    <p>来咨询吧！”</p>
                </div>
                <div class="btn">
                    <a href="">了解更多</a>
                </div>
            </div>
        </div>

        <style>
            .fixed_box .content_box{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                opacity: 0;
            }
            .fixed_box .content_box:first-child{
                opacity: 1;
            }
            .fixed_box{
                width: 100%;
                height: 100vh;
                position: fixed;
                top: 0;
                left: 0;
                z-index: 999;
            }
            .fixed_box .content_box {
                width: 80vw;
                height:100vh;
                display: flex;
                flex-direction: column;
                justify-content: center;
                margin: auto;
            }

            .fixed_box .content_box .text {
                font-size: 3.2vw;
                color: #333;
                letter-spacing: 6px;
                line-height: 1.6
            }

            .fixed_box .content_box .text p {
                transition: all 600ms
            }

            .fixed_box .content_box .en {
                font-size: 2.1vw;
                line-height: 1.5
            }

            .fixed_box .content_box .btn {
                margin-top: 2vw;
                transition: all 600ms
            }

            .fixed_box .content_box .btn a {
                display: inline-block;
                border-radius: 100px;
                border: 1px solid #DA353B;
                color: #DA353B;
                font-size: 1.1vw;
                padding: 0.5vw 2.5vw;
                transition: all 600ms
            }

            .fixed_box .content_box .btn a:hover {
                background: #DA353B;
                color: #fff
            }


            .fixed_box .content_box2 .text p {
                opacity: 0;
                transform: translate(20px, 20px)
            }

            .fixed_box .content_box2 .btn {
                opacity: 0;
                transform: translate(20px, 20px)
            }

            .fixed_box .content_box3 .text p {
                opacity: 0;
                transform: translate(20px, 20px)
            }

            .fixed_box .content_box3 .btn {
                opacity: 0;
                transform: translate(20px, 20px)
            }
        </style>

        <div class="scroll_section content">
            <div class="section_box section" id="scroll-box">
<!--                <div class="content_box">-->
<!--                    <div class="text">-->
<!--                        <p> “留学只是一个开始</p>-->
<!--                        <p>定制化服务</p>-->
<!--                        <p>做好整体规划才是关键”</p>-->
<!--                    </div>-->
<!--                    <div class="btn">-->
<!--                        <a href="">了解更多</a>-->
<!--                    </div>-->
<!--                </div>-->
            </div>
            <div class="section_box hidden_box section" id="scroll-box2">
                <div class="content_box"></div>
                <!--                <div class="content_box">-->
<!--                    <div class="text en">-->
<!--                        <p>“New Fountains（新源）</p>-->
<!--                        <p>是海外本土留学机构免费留学申请平台</p>-->
<!--                        <p>是澳洲官方认证和授权的</p>-->
<!--                        <p>教育和签证服务机构”</p>-->
<!--                    </div>-->
<!--                    <div class="btn">-->
<!--                        <a href="">了解更多</a>-->
<!--                    </div>-->
<!--                </div>-->
            </div>
            <div class="section_box section hidden_box end" id="scroll-box3">
                <div class="content_box"></div>
                <!--                <div class="content_box">-->
<!--                    <div class="text">-->
<!--                        <p>“想申请留学？</p>-->
<!--                        <p>DIY留学遇到困难?</p>-->
<!--                        <p>关于签证问题？</p>-->
<!--                        <p>来咨询吧！”</p>-->
<!--                    </div>-->
<!--                    <div class="btn">-->
<!--                        <a href="">了解更多</a>-->
<!--                    </div>-->
<!--                </div>-->
            </div>
        </div>

        <div class="lenis-scroll w-embed w-script">
            <script src="./js/lenis.min.js"></script>
            <script>
                //ScrollTrigger.config({ ignoreMobileResize: true });
                "use strict"; // fix lenis in safari
                const lenis = new Lenis({
                    lerp: 0.1,
                    wheelMultiplier: 0.7,
                    infinite: false,
                    gestureOrientation: "vertical",
                    normalizeWheel: false,
                    smoothTouch: false,
                    syncTouchLerp: 1,
                    touchMultiplier: 0.1,
                    autoResize: true
                });
                function raf(time) {
                    lenis.raf(time);
                    requestAnimationFrame(raf);
                }
                requestAnimationFrame(raf);
                function connectToScrollTrigger() {
                    lenis.on('scroll', ScrollTrigger.update)
                    gsap.ticker.add((time) => {
                        lenis.raf(time * 1000)
                    })
                    gsap.ticker.lagSmoothing(0)
                }
                // Uncomment this if using GSAP ScrollTrigger
                connectToScrollTrigger();

                window.addEventListener('resize', function () {
                    lenis.resize()
                });
            </script>
        </div>

    </div>
    <script src="./js/jq.js"></script>
    <script src="./js/three.min.js"></script>
    <script src="./js/OBJLoader.js"></script>
    <script src="./js/gsap.min.js"></script>
    <script src="./js/ScrollTrigger.min.js"></script>
    <script src="./js/index.js"></script>
    <script>

        setTimeout(function () {
            $('.fixed_box .content_box:first-child').addClass('fist')
        },10)

        ScrollTrigger.matchMedia({

            // large
            "(min-width: 1025px)": function () {
                const AboutCard = gsap.timeline({
                    scrollTrigger: {
                        trigger: "#scroll-box",
                        start: "top top",
                        end: "+=1000",
                        scrub: 1,
                        pin: "#scroll-box",
                    }
                })
                AboutCard
                    .to(".content_box1", { opacity: 1, duration: 10 })
                    .to(".content_box1 .text p", { opacity: 1, translateX: 20 + 'px', translateY: 20 + 'px', duration: 10 })
                    .to(".content_box1 .btn", { opacity: 1, translateX: 20 + 'px', translateY: 20 + 'px' ,duration: 5 })
                    .to(".content_box1 .btn", { opacity: 0, translateX: 0, translateY: 0,duration: 10 })
                    .to(".content_box1 .text p", { opacity: 0, translateX: 0, translateY: 0,duration: 5 })
                    .set({}, {}, "+=10")



                const AboutCard2 = gsap.timeline({
                    scrollTrigger: {
                        trigger: "#scroll-box2",
                        start: "top top",
                        end: "+=1000",
                        scrub: 1,
                        pin: "#scroll-box2",
                        // markers:true
                    }
                })

                AboutCard2
                    .to(".content_box2", { opacity: 1,duration: 5 })
                    .to(".content_box2 .btn", { opacity: 1, translateX: 0, translateY: 0, duration: 5 })
                    .to(".content_box2 .text p", { opacity: 1, translateX: 0, translateY: 0, duration: 5 })
                    .set({}, {}, "+=5")
                    .to(".content_box2 .btn", { opacity: 0, translateX: 0, translateY: 0, duration: 10 })
                    .to(".content_box2 .text p", { opacity: 0, translateX: 0, translateY: 0, duration: 10 })
                    .set({}, {}, "+=10")



                const AboutCard3 = gsap.timeline({
                    scrollTrigger: {
                        trigger: "#scroll-box3",
                        start: "top top",
                        end: "+=1000",
                        scrub: 1,
                        pin: "#scroll-box3",
                    }
                })

                AboutCard3
                    .to(".content_box3", { opacity: 1, duration: 5 })
                    .to(".content_box3 .btn", { opacity: 1, translateX: 0, translateY: 0, duration: 5 })
                    .to(".content_box3 .text p", { opacity: 1, translateX: 0, translateY: 0, duration: 5 })
                    .set({}, {}, "+=10")
            },

            // small
            "(max-width: 1024px)": function () {
                const AboutCard = gsap.timeline({
                    scrollTrigger: {
                        trigger: "#scroll-box",
                        start: "top top",
                        end: "+=500",
                        scrub: 1,
                        pin: "#scroll-box",
                    }
                })
                AboutCard
                    .to(".content_box1", { opacity: 1, duration: 10 })
                    .to(".content_box1 .text p", { opacity: 1, translateX: 20 + 'px', translateY: 20 + 'px', duration: 10 })
                    .to(".content_box1 .btn", { opacity: 1, translateX: 20 + 'px', translateY: 20 + 'px' ,duration: 5 })
                    .to(".content_box1 .btn", { opacity: 0, translateX: 0, translateY: 0,duration: 10 })
                    .to(".content_box1 .text p", { opacity: 0, translateX: 0, translateY: 0,duration: 5 })
                    .set({}, {}, "+=10")



                const AboutCard2 = gsap.timeline({
                    scrollTrigger: {
                        trigger: "#scroll-box2",
                        start: "top top",
                        end: "+=500",
                        scrub: 1,
                        pin: "#scroll-box2",
                        // markers:true
                    }
                })

                AboutCard2
                    .to(".content_box2", { opacity: 1,duration: 5 })
                    .to(".content_box2 .btn", { opacity: 1, translateX: 0, translateY: 0, duration: 5 })
                    .to(".content_box2 .text p", { opacity: 1, translateX: 0, translateY: 0, duration: 5 })
                    .set({}, {}, "+=5")
                    .to(".content_box2 .btn", { opacity: 0, translateX: 0, translateY: 0, duration: 10 })
                    .to(".content_box2 .text p", { opacity: 0, translateX: 0, translateY: 0, duration: 10 })
                    .set({}, {}, "+=10")



                const AboutCard3 = gsap.timeline({
                    scrollTrigger: {
                        trigger: "#scroll-box3",
                        start: "top top",
                        end: "+=500",
                        scrub: 1,
                        pin: "#scroll-box3",
                    }
                })

                AboutCard3
                    .to(".content_box3", { opacity: 1, duration: 5 })
                    .to(".content_box3 .btn", { opacity: 1, translateX: 0, translateY: 0, duration: 5 })
                    .to(".content_box3 .text p", { opacity: 1, translateX: 0, translateY: 0, duration: 5 })
                    .set({}, {}, "+=10")

            },

        });

    </script>
</body>

</html>